<template>
  <div class="login-container">
    <h1>{{ title }}</h1>
    <div class="login-mian">
      <div class="login-page" :style="`top: ${top}px`">
        <div v-if="isShowQr" class="login-qrCode flex flexdc m-t-60">
          <div class="login-wx">
            <Wxlogin class="wx" />
          </div>
          <div class="login-btn">
            <div class="login-Other flex" @click="handleOtherLogin">
              <span class="logotherbtn">其他登陆方式</span>
            </div>
            <div class="login-label co-label">version：{{ version }}</div>
          </div>
        </div>
        <el-form ref="loginForm" class="form" :model="loginForm" label-width="100px">
          <div v-if="isShowOther" class="Other">
            <div class="login-title flexcenter m-l-40">
              <span :class="`${activeMsg} login-msg loginBtn`" @click="handleTabMsg">短信登陆</span>
              <span :class="`${activePass} login-pass loginBtn`" @click="handleTabPass">密码登陆</span>
            </div>

            <div class="login-input">
              <div v-if="isShowMsg" class="m-l-20">
                <el-form-item prop="phoneNumber">
                  <el-input v-model="loginForm.phoneNumber" clearable prefix-icon="iconfont icon-yonghu" class="bj login-phone" placeholder="请输入您的手机号码" />
                </el-form-item>
                <div class="login-code m-t-30">
                  <el-form-item prop="code">
                    <div class="flex">
                      <el-input v-model="loginForm.code" clearable prefix-icon="iconfont icon-yiji-anquanjianguan" class="bj login-phoneCode m-r-20" placeholder="请输入您的手机验证码" @keyup.enter.native="handleLogin" />
                      <div class="sendbox">
                        <el-button class="bj login-sendCode" :disabled="disabled" @click="handleSendCode">{{ sendMsg }}</el-button>
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>

              <div v-if="isShowPass" class="m-l-20">
                <el-form-item prop="account">
                  <el-input v-model="loginForm.account" clearable prefix-icon="iconfont icon-yonghu" class="login-phone" placeholder="请输入您的账号" />
                </el-form-item>
                <el-form-item prop="password">
                  <el-input v-model="loginForm.password" clearable show-password prefix-icon="iconfont icon-mimaicon" class="login-phone" placeholder="请输入您的密码" />
                </el-form-item>
                <div class="login-code">
                  <el-form-item prop="code">
                    <div class="flex">
                      <el-input v-model="loginForm.imageCode" clearable prefix-icon="iconfont icon-yiji-anquanjianguan" class="login-ImageCode" placeholder="请输入您的验证码" @keyup.enter.native="handleLogin" />
                      <div class="login-span" @click="handelGetImageCode">
                        <el-image class="image-code" :src="loginForm.getImageCode" fit="fill" lazy />
                      </div>
                    </div>
                  </el-form-item>
                </div>
              </div>
            </div>
            <div class="login-footer">
              <div class="flex flexdc">
                <div class="login flex m-r-20" @click="handleLogin">
                  <span class="logbtn">登 陆</span>
                </div>
                <div class="regs flex">
                  <div class="register1 register flex m-r-20" @click="handleRegister">
                    <span class="regss">维保用户注册</span>
                  </div>
                  <div class="register2 register flex" @click="handleRegisterVillage">
                    <span class="regss">小区用户注册</span>
                  </div>
                </div>
              </div>
              <div class="login-label1 co-label" :style="`bottom: -${bottom}px`">version：{{ version }}</div>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="footers">
      Copyright &copy;2012-2020. All Rights Reserved 凌波技术有限公司
    </div>
  </div>
</template>

<script>

import Wxlogin from '@/components/wxlogin/index'
import { showNotice } from '@/utils/toolclass'
import { logPhoneCode, wXGetOpenId } from '@/api/user'
import { fetchValiCode, fetchValiCodeKey } from '@/api/baseInfo/authority/code'
import storage from '@/utils/storage'

export default {
  name: 'Login',
  components: { Wxlogin },
  data() {
    return {
      version: '0.88',
      title: '凌波技术智慧电梯物联网平台',
      isShowQr: true,
      isShowOther: false,
      isShowMsg: true,
      isShowPass: false,
      redirect: undefined,
      loading: false,
      activeMsg: 'active',
      activePass: '',
      count: 0,
      sendMsg: '获取验证码',
      disabled: false,
      top: '',
      bottom: '',
      loginForm: {
        // account: '18692614100',
        account: '13974828961',
        // phoneNumber: '18692614100',
        phoneNumber: '13974828961',
        password: '123456',
        code: '',
        imageCode: '',
        codeKey: '',
        getImageCode: ''
      },
      appId: 'wx4263a501bf57836b',
      secret: '977fbe7e7d0ad0bcde8251347f7a10e4'
    }
  },
  mounted() {
    var clientHeight = (document.documentElement.clientHeight || document.body.clientHeight)
    // console.log(document.documentElement.clientHeight)
    if (clientHeight < 930) {
      this.top = 180
      this.bottom = 60
    } else {
      this.top = 200
      this.bottom = 80
    }
    // 监听浏览器刷新事件
    // window.addEventListener('beforeunload', this.closeMask)
    // this.$once('hook:beoforeDestroy', this.closeMask)
    this.getLogin()
    storage.clear()
    this.$store.state.routerList = []
    this.handleSendCodekey()
    this.getCode()
  },
  methods: {
    // 微信扫码登陆
    getLogin() {
      const url = window.location.href
      // console.log('url111', url)
      if (url.indexOf('code') !== -1) {
        // console.log('用户已扫码，进行授权登陆确认', url)
        const num1 = url.indexOf('code=')
        const num2 = url.indexOf('&state=')
        this.wxcode = url.slice(num1 + 5, num2)
        // console.log('CODE===', this.wxcode)
        // console.log('开始传入CODE')
        wXGetOpenId(this.wxcode).then(res => {
          if (res.code === '000000') {
            // console.log(res)
            storage.set('wxId', res.data)
            this.$store.dispatch('user/wxLogin', res.data).then(res => {
              // console.log('res11', res)
              if (res.code === '000000') {
                // this.$router.push({ path: '/platform' })
                storage.set('systems', res.data.sysList)
                showNotice('success', '提示', '登陆成功')
                return
              }
            }).catch(() => {
              // console.log(err)
            })
          }
        })
      }
    },
    // 登陆界面刷新浏览器清空缓存
    // closeMask() {
    //   storage.clear()
    //   this.$store.state.routerList = []
    // },
    // 销毁事件
    // beforeDestroy() {
    //   this.closeMask()
    // },
    handleRegister() {
      this.$router.push({ path: '/register' })
    },
    handleRegisterVillage() {
      this.$router.push({ path: '/villagereg' })
    },
    handleLogin() {
      if (this.isShowMsg) {
        if (!(/^\S+$/.test(this.loginForm.phoneNumber))) {
          showNotice('error', '提示', '请输入手机号')
          return
        } else if (!(/^1[3456789]\d{9}$/.test(this.loginForm.phoneNumber))) {
          showNotice('error', '提示', '手机号格式错误，请重新输入')
          return
        }
        if (!(/^\S+$/.test(this.loginForm.code))) {
          showNotice('error', '提示', '请输入短信验证码')
          return
        } else if (!(/^\d{5}$/.test(this.loginForm.code))) {
          showNotice('error', '提示', '验证码错误，请重新输入')
          return
        } else {
          this.loading = true
          this.$store.dispatch('user/phoneLogin', this.loginForm).then((res) => {
            // console.log(res)
            this.$router.replace({ path: '/platform' })
            this.loading = false
            storage.set('systems', res.data.sysList)
            showNotice('success', '提示', '登陆成功')
          }).catch(() => {
            this.loading = false
          })
        }
      }
      if (this.isShowPass) {
        if (!(/^\S+$/.test(this.loginForm.account))) {
          showNotice('error', '提示', '请输入登陆账号')
          return
        }
        if (!(/^\S+$/.test(this.loginForm.password))) {
          showNotice('error', '提示', '请输入密码')
          return
        } else if (!/^[A-Za-z0-9]+$/.test(this.loginForm.password) || this.loginForm.password.length < 6) {
          showNotice('error', '提示', '密码错误，请重新输入')
          return
        }
        if (!(/^\S+$/.test(this.loginForm.imageCode))) {
          showNotice('error', '提示', '请输入验证码')
          return
        } else {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then((res) => {
            if (res.code === '000000') {
              this.$router.replace({ path: '/platform' })
              // console.log(res)
              storage.set('systems', res.data.sysList)
              this.loading = false
              showNotice('success', '提示', '登陆成功')
            }
          }).catch(() => {
            this.loading = false
          })
        }
      }
    },
    _setCheckCode(value) {
      this.checkCode = value
    },
    handleOtherLogin() {
      this.isShowQr = false
      this.isShowOther = true
    },
    handelGetImageCode() {
      this.loginForm.codeKey = ''
      fetchValiCodeKey().then(res => {
        if (res.code === '000000') {
          this.loginForm.codeKey = res.data
          this.handelGetCode(this.loginForm.codeKey)
        }
      })
    },
    handelGetCode(code) {
      fetchValiCode(code).then(res => {
        // console.log(res)
        return 'data:image/jpeg;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
      }).then(data => {
        this.loginForm.getImageCode = data // 图片地址 <img src='data' />
      })
    },
    handleSendCodekey() {
      fetchValiCodeKey().then(res => {
        if (res.code === '000000') {
          this.loginForm.codeKey = res.data
        }
      })
    },
    // 手机号登陆
    handleSendCode() {
      this.count++
      if (this.count <= 10) {
        if (this.loginForm.phoneNumber !== undefined && (/^1[3456789]\d{9}$/.test(this.loginForm.phoneNumber))) {
          let time = 60
          const timer = setInterval(() => {
            time--
            if (time === 0) {
              clearInterval(timer)
              this.sendMsg = '获取验证码'
              this.disabled = false
              return
            }
            this.sendMsg = time + 's后重新发送'
          }, 1000)
          this.disabled = true
          this.getCode(this.loginForm.phoneNumber)
          showNotice('success', '提示', '验证码发送成功')
        }
      } else {
        showNotice('error', '提示', '一天只能发送10次验证码')
      }
    },
    getCode(phone) {
      if (phone !== undefined && !(/^1[3456789]\d{9}$/.test(phone))) {
        showNotice('error', '提示', '输入的手机号码有误,请重新输入')
      } else {
        logPhoneCode(phone).then(res => {
          // console.log(res)
          return res
        })
      }
    },
    handleTabMsg() {
      this.activeMsg = 'active'
      this.activePass = ''
      this.isShowMsg = true
      this.isShowPass = false
    },
    handleTabPass() {
      this.handelGetCode(this.loginForm.codeKey)
      this.activePass = 'active'
      this.activeMsg = ''
      this.isShowPass = true
      this.isShowMsg = false
    }
  }
}
</script>

<style lang="scss">
.login-container .el-form-item__error {
  display: none;
}
.footers {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 30px;
  text-align: center;
  color: #ffffff;
}
.login-container {
  height: 90%;
  width: 100%;
  position: relative;
  background: url('~@/assets/login/beijing.png') no-repeat;
  background-size: 100% 100%;
  h1 {
    text-align: center;
    color: #ffffff;
    font-size: 49px;
    font-family: HannotateSC-W5;
    font-weight:normal;
    position: fixed;
    top: 55px;
    right: 0;
    left: 0;
    margin: auto;
  }
  .el-input--prefix .el-input__inner,.bj,
  .el-input--suffix .el-input__inner {
    background: #e0e2f6;
    border-radius: 5px;
    color: #919dad;
  }
  .login-mian {
    height: 100%;
    position: relative;
    #login_container {
      // width: 500px;
      // height: 320px;
      iframe {
        height: 410px;
        margin: 8px 0 0 24px;
      }
    }
    .login-ImageCode {
      width: 200px;
    }
    .login-span {
      width: 118px;
      height: 50px;
      .image-code {
        cursor: pointer;
        width: 118px;
        height: 50px;
        margin-left: 50px;
        border-radius: 5px;
      }
    }
    .login-page {
      position: absolute;
      right: 9%;
      .login-qrCode {
        width: 100%;
        height: 100%;
        .login-wx {
          // width: 500px;
          // height: 500px;
          .wx {
            background: url('~@/assets/login/wx_bj.png') no-repeat;
            background-size: 290px 288px;
          }
        }
      }
      #sub-frame-error {
        width: 160px;
        height: 160px;
        margin: 0 auto;
      }
      .login-wrapper {
        display: flex;
        .validate-code-wrapper {
          margin-left: 20px;
        }
        .el-input--prefix .el-input__inner {
          padding-left: 14px;
          width: 190px;
        }
      }
      .Other {
        width: 500px;
        position: fixed;
        top: 240px;
        right: 15%;
        .login-title {
          margin-bottom: 53px;
          span {
            width: 140px;
            height: 62px;
            text-align: center;
            font-size: 14px;
            color: #000000;
            cursor: pointer;
            // border-radius: 5px;
          }
          .loginBtn {
            width: 243px;
            font-size: 33px;
            font-family: Adobe Heiti Std R;
            color: rgba(68,68,68,1);
            border-bottom: 2px solid #dfdfdf;
          }
          .active {
            color: #00f;
            border-bottom: 2px solid #00f;
            transition: all .3s ease-in .3s;
          }
        }
        .login-input {
          height: 160px;
          margin: 0 0 0 -50px;
        }
        .login-phone {
          width: 370px;
          color: #000000;
        }

        .login-code {
          .sendbox {
            width: 140px;
            height: 40px;
            background: url('~@/assets/login/yzm1.png') no-repeat;
            background-size: 100% 100%;
            cursor: pointer;
            .login-sendCode {
              color: #919dad;
              border: 0;
              margin-left: 14px;
            }
          }
          .login-phoneCode {
            width: 210px;
          }
          .login-code {
            width: 110px;
            height: 40px;
            display: inline-block;
            margin-left: 20px;
            text-align: center;
            line-height: 44px;
            cursor: pointer;
            border: 1px solid #cccccc;
          }
        }
        .login-footer {
          width: 500px;
          height: 180px;
          margin: 54px 0 0 50px;
          position: relative;
          .login {
            width: 360px;
            height: 57px;
            margin-left: 28px;
            cursor: pointer;
            border-radius: 10px;
            align-items: center;
            justify-content: center;
            // background: url('~@/assets/login/dl.png') no-repeat;
            // background-size: 100% 100%;
            background-image:-webkit-linear-gradient(bottom, #6b73f5,#d79efa);
            .logbtn {
              font-size: 20px;
              color: #ffffff;
            }
            // -webkit-text-fill-color: transparent;
            // -webkit-background-clip: text;
          }
          .regs {
            margin-top: 30px;
            margin-left: 30px;
            .regss {
              font-size: 20px;
              background-image: linear-gradient(360deg,#6b73f5,#d79efa);
              -webkit-background-clip:text;
              color: transparent;
            }
            .register {
              width: 170px;
              height: 57px;
              cursor: pointer;
              border-radius: 10px;
              align-items: center;
              justify-content: center;
              background: #ede7f6;
            }
            .register1 {
              // background: url('~@/assets/login/wbba.png') no-repeat;
              // background-size: 100% 100%;

            }
            .register2 {}
          }
          .login-label1 {
            width: 500px;
            line-height: 40px;
            position: absolute;
            left: -34px;
            right: 0;
          }
        }
      }

      .co-label {
        text-align: center;
        font-size: 14px;
        color: #444444;
      }
      .login-btn {
        width: 500px;
        // position: relative;
        .login-Other {
          height: 50px;
          width: 300px;
          // background: url('~@/assets/login/qt.png') no-repeat;
          // background-size: 100% 100%;
          // margin-left: -70px;
          border-radius: 10px;
          align-items: center;
          justify-content: center;
          background-image:-webkit-linear-gradient(bottom, #6b73f5,#d79efa);
          .logotherbtn {
            font-size: 20px;
            color: #ffffff;
          }
        }
        .login-register {
          width: 120px;
        }
        .login-label {
          position: absolute;
          left: 0;
          right: 0;
          right: 40%;
          bottom: -16%;
        }
      }
    }
  }
}
</style>
